<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <el-button type="primary" icon="el-icon-plus" @click="onCreate">新增</el-button>
            <search-bar>
                <el-form :model="form" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="账号">
                                <el-input v-model="form.username" placeholder="请输入账号" clearable @keydown.enter.native="refresh"
                                          @clear="refresh"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="名称">
                                <el-input v-model="form.nickname" placeholder="请输入名称" clearable @keydown.enter.native="refresh"
                                          @clear="refresh"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="refresh">筛 选</el-button>
                    </el-form-item>
                </el-form>
            </search-bar>
            <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe highlight-current-row>
                <el-table-column type="index" width="50" label="#" />
                <el-table-column prop="username" width="200" label="账号" />
                <el-table-column prop="nickname" label="名称" />
                <el-table-column prop="mobile" label="手机号" />
                <el-table-column label="角色" width="200" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.role_id.includes(4)" type="primary">代理商</el-tag>
                        <el-tag v-if="scope.row.role_id.includes(3)" type="info">商家</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="proportion" label="分成比例" :formatter="row => `${parseInt(row.proportion * 100)}%`" />
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" plain @click="onDel(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.role_id.includes(4)" type="primary" size="mini" plain @click="showQrCode(scope.row)">
                            二维码绑定
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="page.page" :total="page.total" :page-size.sync="page.size" :page-sizes.sync="page.sizes"
                           layout="total, sizes, ->, prev, pager, next, jumper" background @size-change="refresh" @current-change="getDataList"
            />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" @success="getDataList" />
        <el-dialog title="提示" :visible.sync="qrVisible" width="400px">
            <div style="text-align: center;">
                <vue-qr :text="qrCodeContent" :size="250" :callback="qrCallback" />
                <div class="m-b">
                    <el-alert title="二维码有效期为5分钟，请在有效时限内绑定" center type="error" :closable="false" />
                </div>
                <div>
                    <el-button style="display: block; width: 100%;" @click="downloadImage(qrBase64)">下载</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="qrVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index'
import VueQr from 'vue-qr'

export default {
    components: {
        FormDialog,
        VueQr
    },
    mixins: [mixin],
    data() {
        return {
            form: {
                username: '',
                nickname: ''
            },
            api: {
                list: 'member/member/tabulation',
                del: 'member/member/delete',
                changeStatus: 'member/member/change-status'
            },
            qrCodeContent: '',
            qrName: '',
            qrBase64: '',
            qrVisible: false
        }
    },
    created() {
        this.getDataList()
    },
    methods: {
        showQrCode(row) {
            const id = row.id
            const t = +new Date()
            const url = `https://power-service.koc365.com/weixin/mp/agentbind?id=${id}&t=${t}`
            this.qrCodeContent = url
            this.qrName = row.nickname
            this.qrVisible = true
        },
        qrCallback(url) {
            this.qrBase64 = url
        },
        downloadImage(base64String) {
            // 创建 Blob 对象
            const blob = this.base64ToBlob(base64String)

            // 创建一个 URL 对象
            const url = URL.createObjectURL(blob)

            // 创建隐藏的 <a> 标签
            const link = document.createElement('a')
            link.href = url
            link.download = `${this.qrName}_qrcode.png` // 下载的文件名
            document.body.appendChild(link)

            // 触发点击事件下载图片
            link.click()

            // 移除 <a> 标签
            document.body.removeChild(link)

            // 释放 URL 对象
            URL.revokeObjectURL(url)
        },
        base64ToBlob(base64) {
            const arr = base64.split(',')
            const mime = arr[0].match(/:(.*?);/)[1]
            const bstr = atob(arr[1])
            let n = bstr.length
            const u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new Blob([u8arr], { type: mime })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    margin-top: 20px;
}
</style>
